<template>
  <div class="app-container">
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;margin-top: 30px"
    >
      <el-table-column label="序号" prop="id" align="center" width="125px">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="就诊科室" width="190px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.subject }}</span>
        </template>
      </el-table-column>
      <el-table-column label="医生姓名" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.doctor_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="200px" align="center">
        <template slot-scope="{row}">
          <span>{{ formatDateTime(row.created_at) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="查看病历" width="190px" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="showBingli(row)">
            查看病历
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="查看检查" width="190px" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="showJiancha(row.appointment_id)">
            查看检查
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="查看处方" width="190px" align="center">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="showChufang(row.appointment_id)">
            查看处方
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-loading="loadingBingli" title="查看病历" :visible.sync="dialogFormVisible">
      <!-- 病历编辑区 -->
      <template>
        <!-- 选了病人和病历 -->
        <div class="createPost-container">
          <el-card shadow="never">
            <p style="text-align: center; border: 3px solid black; padding: 10px;">{{ bingli.title }}</p>
            <el-divider />
            <div v-html="bingli.content" />
          </el-card>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-loading="loadingJiancha" title="查看检查" :visible.sync="dialogFormVisible2">
      <template>
        <el-table
          :data="applyCheckList"
          stripe
          border
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          style="width: 100%"
        >
          <el-table-column label="序号" prop="id" align="center" width="50px">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="检验名称" align="center" width="100px">
            <template slot-scope="{row}">
              <span>{{ row.name || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="申请时间" align="center" width="100px">
            <template slot-scope="{row}">
              <span>{{ formatDateTime(row.time) || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="检查部位/要求" align="center" width="130px">
            <template slot-scope="{row}">
              <span>{{ row.position || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="描述备注" align="center" width="100px">
            <template slot-scope="{row}">
              <span>{{ row.description || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="检查结果" align="center" width="100px">
            <template slot-scope="{row}">
              <span>{{ row.result || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="100px">
            <template slot-scope="{row}">
              <span>{{ row.status || '未完成' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格" align="center" width="100px">
            <template slot-scope="{row}">
              <span>{{ row.price || '-' }} 元</span>
            </template>
          </el-table-column>
          <el-table-column label="支付状态" align="center" width="100px">
            <template slot-scope="{row}">
              <span>{{ payOptions[row.pay_status] || '-' }}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column label="缴费" align="center" width="147px" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-popconfirm title="您确认要缴费吗？" @confirm="getList()">
                <el-button slot="reference" :disabled="row.ApplyStatus == '2'" type="primary" size="mini">
                  {{ row.ApplyStatus == '1' ? '缴费' : '已完成' }}
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column> -->
          <el-table-column label="退费" align="center" width="147px" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-popconfirm title="您确认要退费吗？" @confirm="refundJiancha(row)" @onConfirm="refundJiancha(row)">
                <el-button slot="reference" :disabled="row.status == '已完成' || row.pay_status == 'pending' || row.pay_status == 'refund'" type="primary" size="mini">
                  退费
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;text-align: right;margin-right: 20px;font-size: 16px"> 共 {{ totalPriceJiancha }} 元</div>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">
          取消
        </el-button>
        <el-button type="primary" :disabled="payStatusJiancha" @click="payJiancha()">
          缴费
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看处方" :visible.sync="dialogFormVisible3">
      <!-- 病历编辑区 -->
      <template>
        <el-table
          :data="detailData"
          stripe
          border
          max-height="250"
          min-height="250"
          element-loading-text="正在加载..."
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          style="width: 100%"
        >
          <el-table-column label="序号" prop="id" align="center" width="50px">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="药品名称" align="center" width="100px" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.medical_name || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="用法" align="center" width="100px" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.name || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="用量" align="center" width="100px" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.dosage || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="频次" align="center" width="100px" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.frequency || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="数量" align="center" width="100px" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.num || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="描述" align="center" width="100px" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.description || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格" align="center" width="100px" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ row.price || '-' }} 元</span>
            </template>
          </el-table-column>
          <el-table-column label="支付状态" align="center" width="100px" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ payOptions[row.pay_status] || '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="退费" align="center" width="147px" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <el-popconfirm title="您确认要退费吗？" @confirm="refundChufang(row)" @onConfirm="refundChufang(row)">
                <el-button slot="reference" :disabled="row.pay_status == 'pending' || row.pay_status == 'refund'" type="primary" size="mini">
                  退费
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px;text-align: right;margin-right: 20px;font-size: 16px"> 共 {{ totalPriceChufang }} 元</div>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible3 = false">
          取消
        </el-button>
        <!-- <el-button type="primary" :disabled="!payStatusChufang" @click="refundChufang()">
          退费
        </el-button> -->
        <el-button type="primary" :disabled="payStatusChufang" @click="payChufang()">
          缴费
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { fetchList, getBingli, getJiancha, getChufang, payJiancha, payChufang, refundJiancha, refundChufang } from '@/api/price'
import { payOptions, jianChaOptions } from './mockData'
import waves from '@/directive/waves' // waves directive
import moment from 'moment'
import { Message } from 'element-ui'

export default {
  name: 'PricePage',
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      // 控制表格加载
      listLoading: true,
      loadingBingli: false,
      loadingJiancha: false,
      loadingChufang: false,
      // 控制表格展示隐藏
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogFormVisible3: false,
      // 存储表格展示数组
      bingli: {
        content: '',
        title: '',
        medical_record_id: '',
        is_completed: ''

      },
      applyCheckList: '',
      detailData: '',
      payOptions,
      idSelected: '', // 保存选择的id
      payStatusJiancha: '', // 保存点开检查单的缴费状态
      payStatusChufang: '', // 保存点开处方单的缴费状态
      totalPriceJiancha: '', // 保存点开检查单的总价
      totalPriceChufang: '', // 保存点开处方单的总价
      jianChaOptions,
      // mockData
      postForm: {
        medical_record_id: 1,
        medical_record_title: '标题1',
        medical_record_contend: "<p>常见病历模板1</p><table style='width: 50%; border-collapse: collapse;' border='1'><tbody><tr><td style='width: 50%;'>诊断结果</td><td style='width: 50%;'>感冒</td></tr><tr><td style='width: 50%;'>主要描述</td><td style='width: 50%;'>发烧</td></tr></tbody></table>",
        medical_record_is_completed: '已完成'
      },
      watchForm: {
        medical_record_id: 1,
        medical_record_title: '标题1',
        medical_record_contend: "<p>常见病历模板1</p><table style='width: 50%; border-collapse: collapse;' border='1'><tbody><tr><td style='width: 50%;'>诊断结果</td><td style='width: 50%;'>感冒</td></tr><tr><td style='width: 50%;'>主要描述</td><td style='width: 50%;'>发烧</td></tr></tbody></table>",
        medical_record_is_completed: '已完成'
      }
    }
  },
  // 创建页面时，先获取数据，再渲染页面
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      const params = {
        patient_id: localStorage.getItem('user_id')
      }
      // 筛选时也是重新发送请求到后端请求数据
      fetchList(params).then(response => {
        this.list = response
      })
      // Just to simulate the time of the request
      setTimeout(() => {
        this.listLoading = false
      }, 1.5 * 1000)
    },
    // 格式化展示日期
    formatDateTime(dateTime) {
      return moment(dateTime).format('YYYY-MM-DD HH:mm')
    },
    // 展示病历
    showBingli(row) {
      this.loadingBingli = true
      const params = {
        appointment_id: row.appointment_id
      }
      getBingli(params).then(response => {
        this.bingli = response
        this.loadingBingli = false
        this.dialogFormVisible = true
      })
    },
    // 查看检查
    showJiancha(appointment_id) {
      this.loadingJiancha = true
      const params = {
        appointment_id: appointment_id
      }
      getJiancha(params).then(response => {
        // 保存选择的 appointment_id 和 支付状态（未支付才可以缴费，否则禁用）
        this.idSelected = appointment_id
        this.applyCheckList = response.apply_list
        this.payStatusJiancha = response.is_all_paid
        this.totalPriceJiancha = response.total_price
        this.applyCheckList.forEach(item => {
          if (item.pay_status === 'refund') {
            this.payStatusJiancha = true
          }
        })
        this.loadingBingli = false
        this.dialogFormVisible2 = true
      })
    },
    // 查看处方
    showChufang(appointment_id) {
      this.loadingChufang = true
      const params = {
        appointment_id: appointment_id
      }
      getChufang(params).then(response => {
        this.idSelected = appointment_id
        this.payStatusChufang = response.is_all_paid
        this.totalPriceChufang = response.total_price
        this.detailData = response.medical_use_list
        this.detailData.forEach(item => {
          if (item.pay_status === 'refund') {
            this.payStatusChufang = true
          }
        })
        this.loadingChufang = false
        this.dialogFormVisible3 = true
      })
    },
    // 检查单缴费
    payJiancha() {
      const params = {
        appointment_id: this.idSelected
      }
      payJiancha(params).then(response => {
        Message({
          message: response.message || '缴费成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.dialogFormVisible2 = false
        this.fetchListList()
      })
    },
    // 处方单缴费
    payChufang() {
      const params = {
        appointment_id: this.idSelected
      }
      payChufang(params).then(response => {
        Message({
          message: response.message || '缴费成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.dialogFormVisible3 = false
        this.fetchListList()
      })
    },
    // 检查单退费
    refundJiancha(row) {
      const params = {
        apply_id: row.id
      }
      refundJiancha(params).then(response => {
        Message({
          message: response.message || '退费成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.showJiancha(this.idSelected)
      })
    },
    // 检查单退费
    refundChufang(row) {
      const params = {
        medicine_use_id: row.id
      }
      refundChufang(params).then(response => {
        Message({
          message: response.message || '退费成功',
          type: 'success',
          duration: 3 * 1000
        })
        this.showChufang(this.idSelected)
      })
    }
  }
}
</script>

<style scoped>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.createPost-container {
  position: relative;
  /* background-color: #3898FF; */

}

.createPost-main-container {
  padding: 5px 5px 5px 5px;
  /* background-color: #95E1D3; */
}

.nopatient {
  max-width: 100%;
  background-color: #ffffff;
  margin: auto;
  display: flex;
  justify-content: space-around;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.patient-name {
  color: #3898FF;
  font-size: 18px;
  /* 根据需要调整字体大小 */
}

.maincontainer {
  padding: 15px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.components-container {
  position: relative;
  height: 115vh;
  margin: auto;
}

.left-container {
  background-color: #F38181;
  height: 100%;
}

.right-container {
  background-color: #FCE38A;
  height: 100%;
}

.top-container {
  background-color: #FCE38A;
  width: 100%;
  height: 100%;
}

.bottom-container {
  width: 100%;
  background-color: #95E1D3;
  height: 100%;
}
</style>
